<template>
  <div class="data-list">
    <div
      class="data-card"
      v-for="(item, index) in formatDataList"
      :key="index"
    >
      <div class="num">
        <span>{{item.num}}</span>
        <span
          class="percent"
          :style="{'background-color': theme}"
          v-show="item.percent"
        >{{item.percent}}</span>
      </div>
      <div class="des">{{item.txt}}</div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  created() {},
  computed: {
    ...mapState({
      theme: (state) => state.settings.theme
    }),
    total() {
      const item = this.dataList.find((ele) => ele.isTotal)
      return item?.num || 0
    },
    formatDataList() {
      const arr = []
      this.dataList.forEach((ele, index) => {
        const obj = { ...ele }
        if (ele.isTotal) {
          obj.percent = ''
        } else if (this.total) {
          obj.percent = Math.round((10000 * ele.num) / this.total) / 100 + '%'
        } else {
          obj.percent = '0%'
        }
        arr.push(obj)
      })
      return arr
    }
  },
  methods: {}
}
</script>
<style scoped lang="less">
.data-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-radius: 5px;
  padding: 26px 0;
  background-color: #ffffff;
  .data-card {
    text-align: center;
    flex: 1;
    position: relative;
    &:not(:first-child)::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 80%;
      background-color: rgb(0 0 0 / 15%);
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .num {
      color: #666666;
      line-height: 40px;
      font-size: 26px;
      font-weight: bolder;
      position: relative;
    }

    .percent {
      font-size: 14px;
      margin-left: 8px;
      // background-color: $--color-primary;
      padding: 0 4px;
      border-radius: 3PX;
      color: #ffffff;
      position: absolute;
      height: 20PX;
      line-height: 20PX;
      top: 50%;
      transform: translateY(-50%);
    }
    .des {
      color: #9a9a9a;
      font-size: 17px;
    }
  }
}
</style>